<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>game 1</title>
    <style media="screen">
        canvas {
            border: 1px black solid;
        }
    </style>
    <script src='guagame/utils.js'></script>
    <script src='main.js'></script>

    <script src='guagame/guagame.js'></script>
    <script src='guagame/gua_scene.js'></script>
    <script src='guagame/collide_system.js'></script>
    <script src='guagame/gua_image.js'></script>
    <script src='guagame/gua_partical.js'></script>


    <script src='scene/title/scene_title.js'></script>
    <script src='scene/title/physical.js'></script>

    <script src='scene/main/paddle.js '></script>
    <script src='scene/main/block.js '></script>
    <script src='scene/main/scene.js '></script>
    <script src='scene/main/player.js '></script>
    <script src='scene/main/enemy.js '></script>
    <script src='scene/main/cloud.js '></script>
    <script src='scene/main/bullet.js '></script>
    <script src='scene/main/fire.js '></script>

    <script src='scene/editor/scene_editior.js '></script>

    <script src='scene/end/scene_end.js '></script>

    <script src='level.js '></script>

    <script src='config.js '></script>
</head>

<body>
    <form name="uploadForm">
        <p><input id="upload-config" type="file" name="config_file" onchange="load_config_file();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
        <p><input type="submit" value="Send file"></p>
    </form>
    <canvas id="id-canvas" width="1000" height="500"></canvas>

    <!-- <button id=id-add-block>添加砖块</button>
    <hr>
    <textarea id='id-items-json ' rows="15" cols="50"></textarea>
    </form> -->
    <div>
        <!-- <textarea id='id-text-log ' rows="15" cols="50"></textarea> -->
    </div>
    <div class="debug-range">
        <label>
            <input class="gua-auto-slider" type="range" 
                value=""
                data-value="config.player_speed"
                >
            玩家速度: <span class="gua-label"></span>
        </label>
        <label>
            <input class="gua-auto-slider" type="range" 
                value=""
                data-value="config.cloud_speed"
                >
            云速度: <span class="gua-label"></span>
        </label>
        <label>
            <input class="gua-auto-slider" type="range" 
                value=""
                data-value="config.bullet_speed"
                >
            子弹速度: <span class="gua-label"></span>
        </label>
        <label>
            <input class="gua-auto-slider" type="range" 
                value=""
                max="6"
                min="1"
                data-value="config.cool_down"
                >
            子弹冷却时间: <span class="gua-label"></span>
        </label>

    </div>
    <script>
        var es = sel => document.querySelectorAll(sel)

        var bindAll = function(sel, eventName, callback) {
            var l = es(sel)
            for (var i = 0; i < l.length; i++) {
                var input = l[i]
                input.addEventListener(eventName, function(event) {
                    callback(event)
                })
            }
        }

        bindAll('.gua-auto-slider ', 'input ', function(event) {
            var target = event.target
            var bindVar = target.dataset.value
            var v = target.value
            eval(bindVar + "=" + v)

            var label = target.closest('label ').querySelector('.gua-label ')
            label.innerText = v
        })


        var loadLevel = function(game, n) {
            n = n - 1
            var level = levels[n]
            var blocks = []
            for (var i = 0; i < level.length; i++) {
                var p = level[i]
                var b = Block(game, p)
                blocks.push(b)
            }
            return blocks
        }

        var blocks = []
        var enableDebugMode = function(game, enable) {
            if (!enable) {
                return
            }

            window.addEventListener('keydown ', function(event) {
                var k = event.key
                log(k)
                if (k == 'p ') {
                    paused = !paused
                } else if ('12345 '.includes(k)) {
                    blocks = loadLevel(game, Number(k))
                }
            })

            // 控制速度
            document.querySelector('#id-input-speed ').addEventListener('input ', function(event) {
                var input = event.target
                    // log('event ', event.target)
                window.fps = Number(input.value)
            })

        }



        __main()
    </script>
</body>

</html>